<template>
<div>
  <h5 style="border-bottom: 1px solid #ddd;">平台信息</h5>
  <el-form label-width="90px" :model="form" ref="form" :rules="rules" @submit.native.prevent class="disabled" size="small">
    <el-form-item label="商户编号："><span class="fz12">{{ merchant_num }}</span></el-form-item>
    <el-form-item label="所属代理商："><span class="fz12">{{ form.agent_name }}</span></el-form-item>
    <el-form-item label="所属业务员：">
      <el-select class="w240" v-model="form.sale_num" clearable placeholder="" :disabled="true">
        <el-option v-for="item in salesman" :key="item.saleman_num" :value="item.saleman_num" :label="item.saleman_name"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="用户名：" prop="username" required :show-message="false">
      <el-input class="w240" v-model="form.username" placeholder="" :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="密码：" prop="password" required :show-message="false">
      <el-input class="w240" v-model="form.password" placeholder="" :disabled="show"></el-input>
    </el-form-item>
  </el-form>
  <h5 style="border-bottom: 1px solid #ddd;">商户基础信息</h5>
  <el-form label-width="90px" class="base-form" :model="BaseForm" ref="BaseForm" :rules="relusBase" :disabled="show" :class="show ? 'disabled' : ''">
    <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
      <el-form-item label="商户类型：" required>
        <el-button size="small" @click="handleClickCommitState(300)" :class="merchantType === 300 ? 'el-button--warning' : ''">小微商户</el-button>
        <el-button size="small" @click="handleClickCommitState(200)" :class="merchantType === 200 ? 'el-button--warning' : ''">个体户</el-button>
        <el-button size="small" @click="handleClickCommitState(100)" :class="merchantType === 100 ? 'el-button--warning' : ''">公司</el-button>
      </el-form-item>
    </el-col>
    <el-col :xl="9" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="商户名称：" prop="full_name">
        <el-input class="w240" v-model="BaseForm.full_name"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="15" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="商户简称：" prop="short_name">
        <el-input class="w240" v-model="BaseForm.short_name"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="9" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="商户地址：" prop="real_address">
        <el-input class="w240" v-model="BaseForm.real_address"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="15" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="客服电话：" prop="service_phone">
        <el-input class="w240" v-model="BaseForm.service_phone"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="9" :lg="12" :md="12" :sm="24" :xs="24" v-if="merchantType !== 300">
      <el-form-item label="证件类型：" prop="bus_licence_type">
        <el-select class="w240" v-model="BaseForm.bus_licence_type" @change="handleStateContactType" placeholder="">
          <el-option v-for="item in licence_type" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :xl="15" :lg="12" :md="12" :sm="24" :xs="24" v-if="BaseForm.bus_licence_type === 1">
      <el-form-item label="证件编号：" prop="bus_licence_no">
        <el-input class="w240" v-model="BaseForm.bus_licence_no"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="9" :lg="12" :md="12" :sm="24" :xs="24" v-if="BaseForm.bus_licence_type === 1">
      <el-form-item label="注册时间：" prop="bus_licence_reg_date">
        <el-date-picker class="w240" placeholder="" v-model="BaseForm.bus_licence_reg_date" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col :xl="15" :lg="12" :md="12" :sm="24" :xs="24" v-if="BaseForm.bus_licence_type === 1">
      <el-form-item label="到期时间：" prop="bus_licence_expire">
        <el-date-picker class="w240" placeholder="永久" value-format="yyyy-MM-dd" v-model="BaseForm.bus_licence_expire"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col :span="24">
      <el-form-item label="图片上传：">
        <span class="err fz12">图片上传大小不超过1M，其他照支持上传多张</span>
      </el-form-item>
    </el-col>
    <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
        <label class="el-form-item__label" style="width: 100px;">店铺照片：</label>
        
          <el-form-item style="display:inline-block;" class="mr10" label="" label-width="0" prop="store_face">
            <el-upload :action="url" class="uploader" :show-file-list="false" :before-upload="beforeUpload" :on-success="handleStoreFace">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img :src="BaseForm.store_face" v-if="BaseForm.store_face">
              <span class="fz12"><span class="err">*</span>门头照</span>
            </el-upload>
          </el-form-item>
        
        
          <el-form-item style="display:inline-block;" class="mr10" label="" label-width="0" prop="store_counter">
            <el-upload :action="url" class="uploader" :show-file-list="false" :before-upload="beforeUpload" :on-success="handleStoreCounter">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img :src="BaseForm.store_counter" v-if="BaseForm.store_counter">
              <span class="fz12"><span class="err">*</span>收银台照片</span>
            </el-upload>
          </el-form-item>
        
        
          <el-form-item style="display:inline-block;" class="mr10" label="" label-width="0" prop="store_space">
            <el-upload :action="url" class="uploader" :show-file-list="false" :before-upload="beforeUpload" :on-success="handleStoreSpace">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img :src="BaseForm.store_space" v-if="BaseForm.store_space">
              <span class="fz12"><span class="err">*</span>店内场景照</span>
            </el-upload>
          </el-form-item>

          <el-form-item style="display:inline-block;" class="mr10" label="" label-width="0">
            <el-upload :action="url" class="uploader" :show-file-list="false" :before-upload="beforeUpload" :on-success="handleStoreCanyinPlat">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img :src="BaseForm.store_canyin_plat" v-if="BaseForm.store_canyin_plat">
              <span class="fz12">入驻餐饮平台材料</span>
            </el-upload>
          </el-form-item>

          <el-form-item style="display:inline-block;" label="" label-width="0" prop="bus_licence" class="mr10" v-if="BaseForm.bus_licence_type === 1">
            <el-upload :action="url" class="uploader" :show-file-list="false" :before-upload="beforeUpload" :on-success="handleStoreBus">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img :src="BaseForm.bus_licence" v-if="BaseForm.bus_licence">
              <span class="fz12"><span class="err">*</span>营业执照</span>
            </el-upload>
          </el-form-item>

          <el-form-item style="display:inline-block;" label="" label-width="0" class="mr10" prop="bus_lease_agreement" v-if="BaseForm.bus_licence_type === 2">
            <el-upload :action="url" list-type="picture-card" class="uploader mb20" :on-success="handleLeaseFile" :before-upload="beforeUpload" :on-remove="handleLeaseRemove">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <span class="fz12"><span class="err">*</span>租凭合同</span>
            </el-upload>
          </el-form-item>
      
          <el-form-item style="display:inline-block;" label="" label-width="0" class="mr10">
            <el-upload :action="url" list-type="picture-card" :file-list="BaseForm.fileList" class="uploader" :on-success="handleOtherFile" :before-upload="beforeUpload" :on-remove="handleOtherRemove">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <span class="fz12">其他照片</span>
            </el-upload>
          </el-form-item>
        
    </el-col>
  </el-form>
  <el-col :span="23" :offset="1">
    <el-button v-if="!show" type="primary" size="small" @click="handleClickSubmit" :loading="loading" :disabled="disabled">提交审核</el-button>
    <el-button v-if="!show" type="info" size="small" @click="show = true">取消编辑</el-button>
    <el-button v-if="show" type="primary" size="small" style="margin-left:90px" @click="show = false">编辑资料</el-button>
  </el-col>
</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { verifyEmailOnly, salesman, ToggleType, merchantBaseUpdate } from '@/api/shop'
import { validateEmail } from '@/utils/validate'

export default {
  data() {
    const async_name = (rule, value, callback) => {
      if (value) {
        if (validateEmail(value)) {
          verifyEmailOnly(value).then(res => {
            if (res.data.errorCode === 0) {
              callback()
            } else {
              callback(new Error(res.data.errorMsg))
            }
          })
        } else {
          callback(new Error('邮箱格式不对哦~'))
        }
      } else {
        callback(new Error('请认真填写哦~'))
      }
    }
    const async_pwd = (rule, value, callback) => {
      if (value) {
        if (value.length >= 6 && value.length <= 25) {
          callback()
        } else {
          callback(new Error('密码格式不对哦~'))
        }
      } else {
        callback(new Error('必须填写哦~'))
      }
    }
    return {
      loading: false,
      disabled: false,
      show: true,
      merchant_num: '系统自动生成',
      salesman: [],
      merchantType: '',
      city: [],
      licence_type: [],
      form: {
        agent_name: '',
        sale_num: '',
        username: '',
        password: ''
      },
      BaseForm: {
        type: null,
        full_name: '',
        short_name: '',
        alipay_name: '',
        real_address: '',
        service_phone: '',
        provice: [],
        fileList: [],
        store_face: '',
        store_space: '',
        store_counter: '',
        bus_licence: '',
        bus_licence_no: '',
        alipay_account: '',
        bus_licence_type: '',
        bus_licence_expire: '',
        store_canyin_plat: '',
        bus_lease_agreement: [],
        bus_licence_reg_date: ''
      },
      rules: {
        username: [{ trigger: 'blur', validator: async_name }],
        password: [{ trigger: 'blur', validator: async_pwd }]
      },
      relusBase: {
        full_name: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        postal: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        short_name: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        bus_licence_no: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        service_phone: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        bus_licence_reg_date: [{ required: true, trigger: 'change', message: '必须填写哦~' }],
        real_address: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        store_face: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        store_space: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        store_counter: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        bus_licence: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        bus_licence_type: [{ required: true, trigger: 'change', message: '必须选择哦~' }]
      },
      url: process.env.BASE_API + '/merchant/uploadCommer'
    }
  },
  props: {
    data: {
      required: true,
      type: Object
    }
  },
  methods: {
    handleDocumentInit() {
      salesman(this.id).then(res => {
        if (res.data.errorCode === 0) {
          this.salesman = res.data.result.salesman
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleOtherFile(res, file, fileList) {
      this.BaseForm.fileList.push({ name: file.name, url: res.result, status: file.status, uid: file.uid })
    },
    handleLeaseFile(res, file) {
      this.BaseForm.bus_lease_agreement.push({ name: file.name, url: res.result, status: file.status, uid: file.uid })
    },
    handleClickCommitState(v) {
      this.handleToggleSelect(v)
      this.merchantType = v
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 1

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB！!')
      }
      return isJPG && isLt2M
    },
    handleClickSubmit() {
      this.$refs['BaseForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          merchantBaseUpdate(this.id, this.merchant_num, this.merchantType, this.BaseForm, this.form.password).then(res => {
            if (res.data.errorCode === 0) {
              this.$store.dispatch('merchant_type_set', this.merchantType)
              this.$message.success('基础资料修改成功，请耐心等待审核~')
              this.loading = false
              this.show = true
              this.$emit('update')
            } else {
              this.$message.error(res.data.errorMsg)
              this.loading = false
            }
          })
        }
      })
    },
    handleToggleSelect(v) {
      this.licence_type = []
      this.BaseForm.bus_licence_type = ''
      ToggleType(v).then(res => {
        if (res.data.errorCode === 0) {
          this.licence_type = res.data.result.licence_type
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleStoreFace(file) {
      this.BaseForm.store_face = file.result
    },
    handleStoreCounter(file) {
      this.BaseForm.store_counter = file.result
    },
    handleStoreSpace(file) {
      this.BaseForm.store_space = file.result
    },
    handleStoreBus(file) {
      this.BaseForm.bus_licence = file.result
    },
    handleStoreCanyinPlat(file) {
      this.BaseForm.store_canyin_plat = file.result
    },
    handleStateContactType(v) {
      this.BaseForm.bus_licence_no = ''
      this.BaseForm.bus_licence_reg_date = ''
      this.BaseForm.bus_licence_expire = ''
      this.BaseForm.bus_licence = ''
      this.BaseForm.bus_lease_agreement = []
      this.$store.dispatch('contacts_type_set', v)
    },
    handleOtherRemove(file) {
      for (let i = 0; i < this.BaseForm.fileList.length; i++) {
        if (this.BaseForm.fileList[i].uid === file.uid) {
          this.BaseForm.fileList.splice(i, 1)
        }
      }
    },
    handleLeaseRemove(file) {
      for (let i = 0; i < this.BaseForm.bus_lease_agreement.length; i++) {
        if (this.BaseForm.bus_lease_agreement[i].uid === file.uid) {
          this.BaseForm.bus_lease_agreement.splice(i, 1)
        }
      }
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  created() {
    this.handleDocumentInit()
    this.$nextTick(() => {
      this.merchantType = this.data.type
      this.$store.dispatch('merchant_type_set', this.merchantType)
      this.handleToggleSelect(this.data.type)
      this.merchant_num = this.data.merchant_num
      this.form.agent_name = this.data.agent_name
      this.form.sale_num = this.data.saleman_name
      this.form.username = this.data.username
      this.form.password = this.data.password
      this.BaseForm.full_name = this.data.full_name
      this.BaseForm.short_name = this.data.short_name
      this.BaseForm.service_phone = this.data.service_phone
      this.BaseForm.type = this.data.type
      this.BaseForm.alipay_account = this.data.alipay_account
      this.BaseForm.alipay_name = this.data.alipay_name
      this.BaseForm.real_address = this.data.real_address
      this.BaseForm.bus_licence_type = this.data.bus_licence_type
      this.BaseForm.bus_licence_no = this.data.bus_licence_no
      this.BaseForm.bus_licence_expire = this.data.bus_licence_expire
      this.BaseForm.bus_licence_reg_date = this.data.bus_licence_reg_date
      this.data.photo.hasOwnProperty('store_face') ? this.BaseForm.store_face = this.data.photo.store_face[0] : this.BaseForm.store_face = ''
      this.data.photo.hasOwnProperty('store_canyin_plat') ? this.BaseForm.store_canyin_plat = this.data.photo.store_canyin_plat[0] : this.BaseForm.store_canyin_plat = ''
      this.data.photo.hasOwnProperty('store_counter') ? this.BaseForm.store_counter = this.data.photo.store_counter[0] : this.BaseForm.store_counter = ''
      this.data.photo.hasOwnProperty('store_space') ? this.BaseForm.store_space = this.data.photo.store_space[0] : this.BaseForm.store_space = ''
      this.data.photo.hasOwnProperty('bus_licence') ? this.BaseForm.bus_licence = this.data.photo.bus_licence[0] : this.BaseForm.bus_licence = ''
      this.data.photo.hasOwnProperty('bus_licence_oth') ? this.BaseForm.fileList = this.data.photo.bus_licence_oth : this.BaseForm.fileList = []
      this.data.photo.hasOwnProperty('bus_lease_agreement') ? this.BaseForm.bus_lease_agreement = this.data.photo.bus_lease_agreement : this.BaseForm.bus_lease_agreement = []
    })
  }
}
</script>